<template>
    <el-dialog custom-class="el-dialog-600" v-model="visible">
        <div class="dialog-tab-container">
            <el-button :type="passwordMode ? 'primary' : ''" @click="passwordMode = !passwordMode">
                修改基本信息
            </el-button>
            <el-button :type="!passwordMode ? 'primary' : ''" @click="passwordMode = !passwordMode">
                修改密码
            </el-button>
        </div>
        <div class="dialog-form-container">
            <div class="dialog-form-info" v-show="passwordMode">
                <el-form :model="infoForm" :rules="infoRules" ref="formRefOne" label-width="80px">
                    <el-form-item label="姓名" prop="name">
                        <el-col :span="23">
                            <el-input
                                clearable
                                v-model="infoForm.name"
                                placeholder="请设置您的名字"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="手机" prop="phone">
                        <el-col :span="23">
                            <el-input
                                clearable
                                v-model="infoForm.phone"
                                placeholder="请输入手机号码"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="Email" prop="email">
                        <el-col :span="23">
                            <el-input
                                clearable
                                v-model="infoForm.email"
                                placeholder="请设置您的邮件"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="头像" prop="avatar">
                        <Uploader :on-success="thumbUpload" :on-remove="removeThumbUpload" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="dialog-form-password" v-show="!passwordMode">
                <el-form
                    :model="passwordForm"
                    :rules="passwordRules"
                    ref="formRefTwo"
                    label-width="80px"
                >
                    <el-form-item label="原密码" prop="password">
                        <el-col :span="23">
                            <el-input
                                type="password"
                                clearable
                                v-model="passwordForm.password"
                                placeholder="请输入原密码"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-col :span="23">
                            <el-input
                                type="password"
                                clearable
                                v-model="passwordForm.newPwd"
                                placeholder="请输入新密码"
                            />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="okpassword">
                        <el-col :span="23">
                            <el-input
                                type="password"
                                clearable
                                v-model="passwordForm.okpassword"
                                placeholder="请输入确认密码"
                            />
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <template #footer>
            <el-button @click="visible = false"> 取 消 </el-button>
            <el-button
                type="primary"
                :loading="loading"
                @click="onSubmit(passwordMode ? 'formRefOne' : 'formRefTwo')"
            >
                确 定
            </el-button>
        </template>
    </el-dialog>
</template>

<script>
import { adminUser as Api } from 'api';
import { defineComponent, getCurrentInstance, ref, reactive, watch } from 'vue';

export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance();
        // 手机号验证
        const checkPhone = (rule, value, callback) => {
            if (proxy.$validate.isPhone(value) || value == '') {
                callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        };
        // 电子邮件验证
        const checkEmail = (rule, value, callback) => {
            if (proxy.$validate.isEmail(value) || value == '') {
                callback();
            } else {
                return callback(new Error('请输入正确的电子邮件'));
            }
        };
        // 密码验证
        const checkPassword = (rule, value, callback) => {
            if (proxy.$validate.isPassword(value) || value == '') {
                callback();
            } else {
                return callback(new Error('密码须长度8-16位数并且需要小写字母+数组组合'));
            }
        };

        let loading = ref(false), // 按钮等待
            visible = ref(false), // 弹窗开关
            passwordMode = ref(true), // 设置切换
            // 表单
            infoForm = reactive({ name: '', phone: '', email: '', avatar: '' }),
            passwordForm = reactive({ password: '', newPwd: '', okpassword: '' }),
            // 验证
            infoRules = {
                phone: [{ validator: checkPhone, trigger: 'change' }],
                email: [{ validator: checkEmail, trigger: 'change' }]
            },
            passwordRules = {
                password: [{ required: true, message: '请输入原密码', trigger: 'change' }],
                newPwd: [{ required: true, validator: checkPassword, trigger: 'change' }],
                okpassword: [{ required: true, validator: checkPassword, trigger: 'change' }]
            };

        // 图片上传
        const thumbUpload = (fileStr) => {
            infoForm.avatar = fileStr;
        };
        // 删除图片
        const removeThumbUpload = (fileStr) => {
            infoForm.avatar = fileStr;
        };
        // 确认按钮
        const onSubmit = async (formName) => {
            await proxy.$refs[formName].validate((valid) => {
                if (valid) {
                    loading.value = true;
                }
            });

            if (loading.value) {
                let url = passwordMode.value ? Api.updateUserInfo : Api.updatePassword;
                let params = passwordMode.value
                    ? (params = {
                        /* 修改用户信息 */
                        name: infoForm.name,
                        phone: infoForm.phone,
                        email: infoForm.email,
                        avatar: infoForm.avatar
                    })
                    : (params = {
                        password: passwordForm.password,
                        newPwd: passwordForm.newPwd,
                        okpassword: passwordForm.okpassword
                    });

                const { code, msg, data } = await proxy.$http.put(url, params);

                if (code === 200) {
                    proxy.$store.dispatch('getUserInfo');
                    proxy.$msg.success(msg);
                    visible.value = false;
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }

                loading.value = false;
            }
        };

        watch(visible, (newVal, oldVal) => {
            if (!newVal) {
                proxy.$refs['formRefOne'].resetFields();
                proxy.$refs['formRefTwo'].resetFields();
            }
        });

        return {
            loading,
            visible,
            passwordMode,
            infoForm,
            passwordForm,
            infoRules,
            passwordRules,
            thumbUpload,
            removeThumbUpload,
            onSubmit
        };
    }
});
</script>

<style lang="less" scoped>
.dialog-tab-container {
    text-align: center;
    margin-bottom: 24px;
}
</style>